function detailsShow() {
    //通过地址栏传递过来的sid编号 去后台获取相应数据处理进行渲染
    let mySid = location.search.substring(1).split("=")[1];
    //默认为第一条数据
    mySid = mySid || "1";

    let small_picsNum = 0; //保存小图数量 方便后续操作

    //通过该地址和商品编号到后台抓取相应数据
    $.ajax({
        type: "GET",
        url: "http://10.31.157.19/myule/php/detail.php",
        data: {
            sid: mySid
        },
        dataType: "json"
    }).done(function(myData) {
        //将抓取到的数据进行渲染
        $(".smallImage img").attr("src", myData.picurl);
        $(".bigOne img").attr("src", myData.picurl);
        $(".showInfo .titleInfo").html(myData.title).css({ fontWeight: "bold", fontSize: 22 });
        //下面两步是 渲染假设的原价信息
        let price = parseInt((myData.price) * 1.3);
        let prePrice = "<del style='font-size:20px;color:#9d9d9d;padding-left:20px'>" + "￥" + price + "</del>";

        let temo = $(".goodsid").html();
        $(".goodsid").html(temo + "&emsp;" + myData.sid);
        $(".goodsid").css({ fontSize: 19 });
        temo = $(".showInfo .priceInfo").html();
        $(".showInfo .priceInfo").html(temo + "&emsp;￥" + myData.price + prePrice).css({ fontWeight: "bold", fontSize: 30, color: "red" });

        //加载小图
        let smallpics = [];
        if (myData.piclisturl.includes(",")) {
            smallpics = myData.piclisturl.split(",");
        } else {
            smallpics.push(myData.piclisturl);
        }
        //渲染小图结构
        let str = "";
        for (let value of smallpics) {
            str += `
                <li>
                    <img src='${value}'>
                </li>
            `;
        }
        small_picsNum = smallpics.length; //保存小图数量
        $(".differentImage ul").html(str);
        $(".differentImage ul li").eq(0).addClass(".active").siblings("li").removeClass(".active");
    });

    //获取本地的用户信息并且渲染到页面
    function get_username() {
        if (localStorage.getItem("tel")) {
            $(".login_registry").css({ display: "none" });
            let str = "<span>退出</span>";
            $(".showName").html("尊敬的" + localStorage.getItem("tel") + str);
        }
    }
    //渲染的结构 要使用事件委托 如果有用户名就展示
    $(".showName").on("click", "span", function() {
        localStorage.removeItem("tel");
        $(".login_registry").css({ display: "inline" });
        $(".showName").html("");
    });
    get_username();

    //放大镜
    let smallpic = $(".smallImage"); //小图
    let smallf = $(".smallOne"); //小放
    let bigpic = $(".bigImage"); //大图
    let bigf = $(".bigOne"); //大放
    //大图/小图=大放/小放

    smallpic.hover(function() {
            //先显示元素
            bigf.css({ visibility: "visible" });
            smallf.css({ visibility: "visible" });
            //再计算小放的宽高 设置小放的背景色透明度
            smallf.width(bigf.width() * smallpic.width() / bigpic.width());
            smallf.height(bigf.height() * smallpic.height() / bigpic.height());
            smallf.css({ background: "pink", opacity: 0.4 });
            //计算大图和小图之间的比例 后面会通过比例计算大图片的偏移值
            let rate = bigpic.width() / smallpic.width();
            //当鼠标在小图上移动的时候触发
            smallpic.on("mousemove", function(ev) {
                var ev = ev || window.event;
                //鼠标到页面左边的距离-小图到页面左边的距离-小放大镜的一半宽度
                let leftDis = ev.pageX - smallpic.offset().left - smallf.width() / 2;
                //到顶部的距离 原理同上
                let topDis = ev.pageY - smallpic.offset().top - smallf.height() / 2;

                //设置边界条件
                //并且时刻记录小放大镜的偏移值
                if (leftDis <= 0) {
                    leftDis = 0;
                } else if (leftDis >= smallpic.width() - smallf.width()) {
                    leftDis = smallpic.width() - smallf.width();
                }
                if (topDis <= 0) {
                    topDis = 0;
                } else if (topDis >= smallpic.height() - smallf.height()) {
                    topDis = smallpic.height() - smallf.height();
                } //上面两个if可以确保鼠标在小放大镜中心位置 并且小放大镜不会超出范围
                //对小放大镜和大放大镜的位置进行赋值
                smallf.css({ left: leftDis, top: topDis });
                bigpic.css({ left: -leftDis * rate, top: -topDis * rate });

            });
        },
        function() {
            //鼠标移出 大放大镜和小放大镜隐藏
            bigf.css({ visibility: "hidden" });
            smallf.css({ visibility: "hidden" });
        }
    );

    //因为小图的结构是渲染上去的，无法直接取到该元素，所以利用事件委托处理
    //实现点击小图同步切换上面两张大图的图片
    $(".differentImage ul").on("click", "li", function() {
        //当前的this就是我们的子元素li
        //给当前被点击的li元素加上边框 突出显示
        $(this).addClass("active").siblings("li").removeClass("active");
        //找到小图的图片路径
        let path = $(this).find("img").attr("src");
        //若小图的图片地址中显示图片为m码 我们就将其通过字符串方法修改为xl码 从而解决m码的小图路径同步到大图时造成失真的情况
        if (path.substr(-10, 10).includes("m")) {
            //取小图地址后十位 查看是不是有m 有则在其用地址渲染大图的时候将m修改为xl再传给大图
            let arr = []; //记录地址中每个字母m的索引
            //但是实质上用的到的只有最后一个m的索引
            //此处应该还可以继续优化......
            for (let i = 0; i < path.length; i++) {
                if (path[i] == "m") {
                    arr.push(i);
                }
            }
            let prePath = path.substring(0, arr[arr.length - 1]); //截取小图地址中表示码数m之前的字符串
            let nextPath = "xl" + path.substring(arr[arr.length - 1] + 1); //截取小图地址中表示码数m之后的的字符串(不包含m本身) 并且拼接上xl码数
            path = prePath + nextPath; //完成xl码图片的的拼接
        }
        //同步渲染两张大图的地址
        $(".smallImage img").attr("src", path);
        $(".bigOne img").attr("src", path);

    });



    //数量输入框初始化为1
    $(".goodsnum").val($(".goodsnum").val() || 1);
    $(".goodsnum").on("input", function() {
        let reg = /^[0-9]+$/; //限定输入框中只能有数字
        if (!reg.test($(".goodsnum").val())) {
            $(".goodsnum").val("");
        }
    });
    //若数量输入框失去焦点的时候value仍为空或为0 就赋值为1
    $(".goodsnum").on("blur", function() {
        $(".goodsnum").val($(".goodsnum").val() || 1);
        if ($(".goodsnum").val() == 0) {
            $(".goodsnum").val(1);
        }
    });
    //数量的减按钮
    $(".leftnum").on("click", function() {
        //限定只有数量大于1的时候才可以减
        if (parseInt($(".goodsnum").val()) > 1) {
            let temp = parseInt($(".goodsnum").val()) - 1;
            $(".goodsnum").val(temp);
        }
    });
    //数量的加按钮  加没有限制
    $(".rightnum").on("click", function() {
        let temp = parseInt($(".goodsnum").val()) + 1;
        $(".goodsnum").val(temp);

    });

    //添加到购物车
    let time = null;
    $(".addMyCart").on("click", function() {

        //保存商品sid 和 对应购买数量
        let currentSid = [];
        let currentNum = [];
        //先看看本地存储有没有保存过数据 如果有就取出来
        //没有就直接加入数据
        if (localStorage.getItem("goodsSid") && localStorage.getItem("goodsNum")) {
            currentSid = localStorage.getItem("goodsSid").split(",");
            currentNum = localStorage.getItem("goodsNum").split(",");
            //若有该商品的记录就在原数量基础上加
            if (currentSid.includes(mySid)) {
                let preNum = parseInt(currentNum[currentSid.indexOf(mySid)]);
                currentNum[currentSid.indexOf(mySid)] = preNum + parseInt($(".goodsnum").val());
                localStorage.setItem("goodsNum", currentNum);
            } else {
                //否则就插入新的数据
                currentSid.push(mySid);
                currentNum.push($(".goodsnum").val());
                localStorage.setItem("goodsSid", currentSid);
                localStorage.setItem("goodsNum", currentNum);
            }

        } else {
            currentSid.push(mySid);
            currentNum.push($(".goodsnum").val());
            localStorage.setItem("goodsSid", currentSid);
            localStorage.setItem("goodsNum", currentNum);
        }
        //添加商品的数量和sid到本地存储后 弹出提示 成功添加到购物车
        $(".lastbutton span").css({
            display: "block"
        });
        if (time) {
            clearTimeout(time);
        }
        time = setTimeout(function() {
            $(".lastbutton span").css({
                display: "none"
            });
        }, 400);
    });

    //进入购物车
    $("#banner .wrapper button").on("click", function() {
        location.href = "./cartlist.html";
    });

    let picLimit = 4;
    let dif = 0;
    //点击小图的左右键切换图片
    $(".rightSmallpic").on("click", function() {
        if (dif < small_picsNum - picLimit) {
            let preLeft = parseInt($(".limitwidth ul").position().left);
            preLeft = preLeft - 72;
            $(".limitwidth ul").css("left", preLeft);
            dif++;
        }
    });
    $(".leftSmallpic").on("click", function() {
        if (dif > 0) {
            let preLeft = parseInt($(".limitwidth ul").position().left);
            preLeft = preLeft + 72;
            $(".limitwidth ul").css("left", preLeft);
            dif--;
        }

    });
}
detailsShow();